<template>
    <div class="table-box">
        <div class="table-search">
            <el-form :inline="true" :model="form">
                <el-form-item label="状态">
                    <el-select v-model="form.status" placeholder="状态" clearable>
                        <el-option v-for="item in statusList" :key="item.type" :label="item.name"
                            :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户UID">
                    <el-input v-model="form.uid" placeholder="用户UID" />
                </el-form-item>

                <el-form-item label="证件号码">
                    <el-input v-model="form.id_number" placeholder="证件号码" />
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="form.timeData" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="截止日期" :default-time="pickerDefaultTime" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onQuery">查询</el-button>
                    <el-button @click="onReset">重置</el-button>

                    <!-- <el-button type="primary" plain @click="onExport">导出</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <div class="card content-box">
            <div class="table">
                <el-table :data="tableData" border v-loading="loading">
                    <el-table-column prop="id" label="ID" align="center" />
                    <el-table-column prop="uid" label="用户UID" align="center" />
                    <el-table-column prop="id_name" label="实名姓名" align="center" />
                    <el-table-column prop="id_number" label="证件号码" align="center" />
                    <el-table-column label="证件正面照" align="center">
                        <template #default="scope">
                            <el-image style="width: 70px; height: 70px" :src="scope.row.face_img" alt fit="fill"
                                :preview-src-list="[scope.row.face_img]" :preview-teleported="true"></el-image>
                        </template>
                    </el-table-column>

                    <el-table-column label="证件背面照" align="center">
                        <template #default="scope">
                            <el-image style="width: 70px; height: 70px" :src="scope.row.backend_img" alt fit="fill"
                                :preview-src-list="[scope.row.backend_img]" :preview-teleported="true"></el-image>
                        </template>
                    </el-table-column>

                    <el-table-column label="手持照" align="center">
                        <template #default="scope">
                            <el-image style="width: 70px; height: 70px" :src="scope.row.handle_img" alt fit="fill"
                                :preview-src-list="[scope.row.handle_img]" :preview-teleported="true"></el-image>
                        </template>
                    </el-table-column>

                    <el-table-column prop="remark" label="备注" align="center" />
                    <!-- <el-table-column prop="status" label="审核状态" align="center" /> -->
                    <el-table-column label="审核状态" align="center">
                        <template #default="scope">
                            <!-- {{ getAuditStatus(scope.row.status) }} -->
                            {{ scope.row.status === 0 ? '未审核' : scope.row.status === 1 ? '审核成功' : '审核失败' }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="auditor" label="审核人" align="center" />

                    <el-table-column prop="createtime" label="审核时间" align="center" :formatter="formatterTime" width="180" />
                    <el-table-column prop="updatetime" label="提交时间" align="center" :formatter="formatterTime" width="180" />

                    <el-table-column label="操作" align="center" width="120" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" plain @click="handleReview(scope.$index, scope.row)"
                                v-if="scope.row.status === 0">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="table-pagination">
                    <el-pagination :current-page="pageable.pageNum" :page-size="pageable.pageSize"
                        :page-sizes="[10, 25, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
                        :total="pageable.total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <ReviewForm @cancel="cancel" @closeDialog="closeDialog" @submitForm="submit" :dialogFormVisible="dialogVisible"
            :dialogForm="dialogForm" :btnLoading="btnLoading" />
    </div>
</template>
  
<script setup>
import { ref, onMounted, reactive } from "vue";
import { formatterTime, exportToExcel, timestamp, pickerDefaultTime } from "@/utils/utils";
import { userIdverifyApi, userIdverifyAuditApi } from "@/api/slotsgame/user/user";
import ReviewForm from "./components/reviewForm.vue";
// import { userInviteApi } from "@/api/slotsgame/user/user";
const tableData = ref([]);
const loading = ref(false);
const statusList = ref([]);
const btnLoading = ref(false);
const dialogVisible = ref(false);
// const getAuditStatus = (status) => {
//     if (status === 1) {
//         return "审核通过";
//     } else if(status === 2) {
//         return "审核失败";
//     }else{
//         return "待审核";
//     }
// };
const formData = {
    uid: "",
    id_number: "",
    timeData: [],
    status: "",
};
const dialogFormData = {
    id: "",
    status: "",
};
const dialogForm = reactive({ ...dialogFormData });
// 审核操作
// const handleReview = async (index, row) => {
//     dialogVisible.value = true;
//     Object.assign(dialogForm, {
//         id: row.id,
//     });
// };
//关闭弹窗
const closeDialog = () => {
    dialogVisible.value = false;
    Object.assign(dialogForm, dialogFormData);
};
const cancel = () => {
    dialogVisible.value = false;
    Object.assign(dialogForm, dialogFormData);
};
const form = reactive({ ...formData });
// 提交
const submit = async (param) => {
    try {
        console.log('Param object:', param);
        btnLoading.value = true;
        const res = await userIdverifyAuditApi(param);
        ElMessage({
            showClose: true,
            message: res.message,
            type: "success",
        });
        dialogVisible.value = false;
        btnLoading.value = false;
        getTbaleData();
    } catch (error) {
        btnLoading.value = false;
        dialogVisible.value = false;
    }
};
// const dialogForm = reactive({ ...dialogFormData });
// 审核操作
const handleReview = async (index, row) => {
    dialogVisible.value = true;
    Object.assign(dialogForm, {
        id: row.id,
    });
};
const pageable = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
});
// 参数
const param = () => {
    return {
        page: pageable.pageNum,
        pagesize: pageable.pageSize,
        uid: form.uid,
        status: form.status,
        id_number: form.id_number,
        start: form.timeData[0] ? timestamp(form.timeData[0].valueOf()) : "",
        end: form.timeData[1] ? timestamp(form.timeData[1].valueOf()) : "",
    };
};
console.log(param());
// 导出
// const onExport = async () => {
//     const data = Object.assign(param(), { export: 1 });
//     const res = await userIdverifyApi(data);

//     let head = {
//         id: "ID",
//         invite_uid: "邀请人UID",
//         uid: "被邀请人UID",
//         fb_uuid: "被邀请人Facebook ID",
//         google_uuid: "被邀请人Google ID",
//         rebate: "邀请返利",
//         createtime: "邀请时间",
//         updatetime: "确认时间",
//     };
//     exportToExcel(res.data.results, head, "邀请记录");
// };
// 获取表格数据
const getTbaleData = async () => {
    loading.value = true;

    try {
        const res = await userIdverifyApi(param());
        loading.value = false;
        tableData.value = res.data.results;
        pageable.total = res.data.count;
        statusList.value = res.data.extra.status.map((item) => {
            return { type: item.value, name: item.name };
        });
    } catch (error) {
        loading.value = false;
    }
};
// 重置
const onReset = () => {
    Object.assign(form, formData);
    // Object.keys(form).forEach(key => {
    //     form[key] = formData[key]; // 通过遍历将每个字段重置为初始值
    // });
    getTbaleData();
};
// 查询
const onQuery = async () => {
    getTbaleData();
    console.log(param(1));
};

// 条数
const handleSizeChange = (number) => {
    pageable.pageSize = number;
    getTbaleData();
};
// 页码
const handleCurrentChange = (number) => {
    pageable.pageNum = number;
    getTbaleData();
};
onMounted(() => {
    getTbaleData();
});
</script>
  